
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>jQuery评论回复插件</title>
    <script src="js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="js/comment/css/bootstrap.css">
    <script src="js/comment/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/comment/js/jquery.min.js"></script>
    <script type="text/javascript" src="js/comment/js/jquery.comment.js" ></script>
    <script type="text/javascript" src="js/comment/js/bootstrap.min.js"></script>
    <script type="text/javascript"></script>
    <style>
        .container{
            width: 1000px;
        }
        .commentbox{
            width: 900px;
            margin: 20px auto;
        }
        .mytextarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }
        .comment-list{
            width: 900px;
            margin: 20px auto;
            clear: both;
            padding-top: 20px;
        }
        .comment-list .comment-info{
            position: relative;
            margin-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }
        .comment-list .comment-info header{
            width: 10%;
            position: absolute;
        }
        .comment-list .comment-info header img{
            width: 100%;
            border-radius: 50%;
            padding: 5px;
        }
        .comment-list .comment-info .comment-right{
            padding:5px 0px 5px 11%;
        }
        .comment-list .comment-info .comment-right h3{
            margin: 5px 0px;
        }
        .comment-list .comment-info .comment-right .comment-content-header{
            height: 25px;
        }
        .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
            padding-right: 2em;
            color: #aaa;
        }
        .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
            cursor: pointer;
        }
        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }
        .comment-list .comment-info .comment-right .reply-list .reply{
            border-bottom: 1px dashed #ccc;
        }
        .comment-list .comment-info .comment-right .reply-list .reply div span{
            padding-left: 10px;
        }
        .comment-list .comment-info .comment-right .reply-list .reply p span{
            padding-right: 2em;
            color: #aaa;
        }
    </style>


</head>

<div class="container">
    <div class="commentbox">
        <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
        <div class="btn btn-info pull-right" id="comment">评论</div>
    </div>
    <div class="comment-list">
            <div class="comment-info">
                <header><img src="./images/img.jpg"></header>
                <div class="comment-right">
                    <h3>匿名</h3>
                    <div class="comment-content-header"><span>
                        <i class="glyphicon glyphicon-time"></i>评论时间</span><span>
                        <i class="glyphicon glyphicon-map-marker"></i>地区</span></div>
                    <p class="content">评论内容</p>
                    <div class="comment-content-footer">
                        <div class="row">
                            <div class="col-md-2"><span class="reply-btn">回复</span></div>
                        </div>
                    </div>
                    <div class="reply-list"></div>
                </div>
            </div>
    </div>
</div>


<script>
    //初始化数据
    var arr = [


    ];
    $(function(){
        $(".comment-list").addCommentList({data:arr,add:""});
        $("#comment").click(function(){
            var obj = new Object();
            obj.img="./images/img.jpg";
            obj.replyName="懒人";
            obj.content=$("#content").val();
            obj.replyBody="";
            $(".comment-list").addCommentList({data:[],add:obj});
        });
    })
</script>
</body>
</html>